import React, { Component } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { List, Button, Toast } from 'antd-mobile';
import styles from './style.less';

const Item = List.Item;
const Brief = Item.Brief;

const Mine = ({ dispatch, userInfo }) => {
  const { UserName } = userInfo;
  const checkVersion = () => {
    Toast.loading('版本检测...', 1, () => {
      setTimeout(() => {
        Toast.info('目前已是最新版本', 1, null, false);
      }, 100);
    });
  };

  const onLogout = () => {
    dispatch({ type: 'login/onLogout' });
  };
  return (
    <div className={styles.mine}>
      <div className={styles.header}>
        <div>{UserName}</div>
        <div />
      </div>
      <div className={styles.body}>
        <List className={styles['item-list']} renderHeader={<span />}>
          <Item
            arrow="horizontal"
            onClick={() => {
              router.push('/mine/aboutUs');
            }}
          >
            关于我们
          </Item>
          <Item arrow="horizontal" onClick={checkVersion}>
            检测更新
          </Item>
          <Item extra="V1.0.0">版本号</Item>
          <Item>
            <Button type="primary" onClick={onLogout}>
              退出登陆
            </Button>
          </Item>
        </List>
      </div>
    </div>
  );
};

export default connect(({ app }) => ({ userInfo: app.userInfo }))(Mine);
